<template>
	<view class="container" :style="{'padding-top': phoneHieght}">
		<u-navbar :fixed="true" bgColor="rgba(0,0,0,0)">
			<template slot="left">
				<image src="../../static/image/logo.png" mode="" class="image-logo"></image>
			</template>
		</u-navbar>
		<barrage-bar ref="barrage" class="barrage-class"></barrage-bar>
		<scroll-view enableFlex scroll-y @scrolltolower="getMoreData" class="body" @refresherpulling="refresherpulling">
			<!-- :style="{'height': `calc(100vh - ${phoneHieght})`}" -->
			<u-swiper :list="swiperList" keyName="pic" :autoplay="true" indicatorStyle="right: 34rpx;bottom: 17rpx"
				height="294rpx" imgMode="scaleToFill" @change="e => currentSwiper = e.current" @click="goDetail">
				<view slot="indicator" class="indicator-dot-container">
					<view class="indicator-dot" v-for="(item, index) in swiperList" :key="index"
						:class="{'indicator-dot-active' : index === currentSwiper}">
					</view>
				</view>
			</u-swiper>
			<view class="center-menu">
				<view class="all-back main-center-flex" :style="{'background-image': 'url('+allBack+')'}">
					<view class="daily-view" @click="openPopup">
						<!-- <view class="daily-title">
							<view class="d-view">每日</view>
							<view class="t-view">任务</view>
						</view>
						<view class="progress">
							<view class="progress-line">
								<view class="progress-inner" :style="{'width': percent + '%'}"></view>
								<text class="progress-text">{{percent ? percent.toFixed(0) + '%' : 0}}</text>
							</view>
						</view> -->
					</view>
					<view class="list-view" @click="openList">
						<!-- <view class="list-text">
							<view class="hl-view">
								<view class="h-view">荣誉</view>
								<view class="l-view">榜单</view>
							</view>
							<view class="ls-view">
								<view class="limit-view">每日限时</view>
								<view class="sprint-view">冲榜赢好礼</view>
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<view v-if="showNewer" class="newer">
				<view class="new-title main-start-flex">
					<view class="head_decorate_1"></view>
					<view class="head_decorate_2"></view>
					<view class="head_title">
						<text class="head_title_1">新人定制</text>
						<text class="head_title_2">NEW USER SPECIFIC</text>
					</view>
				</view>
				<view class="new-content">
					<!-- 新人必买 -->
					<view v-if="showNewerMust" class="new-item" :style="{'background-image': 'url('+must+')'}" @click="toBlindDetail(1)">
						<view class="left main-start-flex">
							<!-- <image class="new-icon" :src="mustIcon"></image> -->
							<image class="new-icon" :src="newerMust.pic"></image>
						</view>
						<view class="right">
							<view class="top-area">
								<view class="top-text">
									<view class="title_1">新人必买盲盒</view>
									<view class="title_2">开盒必出史诗及以上商品</view>
								</view>
								<view class="limit-class" :style="{'background-image': 'url('+limitNum+')'}">
									<view>仅限</view>
									<view>{{ newerMust.buy_num_limit + '次' }}</view>
								</view>
							</view>
							<view>
								<view class="middle-view main-center-flex" :style="{'background-image': 'url('+mustBtn+')'}">
									<view>{{ '￥' + newerMust.first_amount }}</view>
									<view class="column-center-flex">
										<text class="title_3">马上买</text>
										<text class="title_4">{{ newerMust.sales ? newerMust.sales + '人已买' : ''}}</text>
									</view>
								</view>
							</view>
							<!-- <view class="bottom-area">
								<image :src="bottomBack"></image>
							</view> -->
						</view>
					</view>
					<!-- 买一送一 -->
					<view v-if="showNewerPresent" class="new-item" :style="{'background-image': 'url('+present+')'}" @click="toBlindDetail(2)">
						<view class="left main-start-flex">
							<!-- <image class="new-icon" :src="presentIcon"></image> -->
							<image class="new-icon" :src="newerPresent.pic"></image>
						</view>
						<view class="right">
							<view class="top-area">
								<view class="top-text">
									<view class="title_1_newer main-space-around">
										<view class="new-tag">新人</view>
										新人买一送一
									</view>
									<view class="title_2">新人限定福利</view>
								</view>
								<view class="limit-class" :style="{'background-image': 'url('+limitNum2+')'}">
									<view>仅限</view>
									<view>{{ newerPresent.present_buy_num_limit + '次' }}</view>
								</view>
							</view>
							<view>
								<view class="middle-view main-center-flex" :style="{'background-image': 'url('+presentBtn+')'}">
									<view>{{ '￥' + newerPresent.price }}</view>
									<view class="column-center-flex">
										<text class="title_3">马上买</text>
										<text class="title_4">{{ newerPresent.sales ? newerPresent.sales + '人已买' : '' }}</text>
									</view>
								</view>
							</view>
							<!-- <view class="bottom-area">
								<image :src="bottomBack"></image>
							</view> -->
						</view>
					</view>
					<!-- 白嫖 -->
					<view v-if="showLuckyOrderList" class="free-item-free" :style="{'background-image': 'url('+freeloader+')'}" @click="toBlindDetail(3)">
						<view class="free-limit-view column-center-flex" :style="{'background-image': 'url('+freeloaderLimit+')'}">
							<view class="quota">限购</view>
							<view class="quota">{{ luckyOrderList.lucky_buy_limit + '次' }}</view>
						</view>
						<view class="top-view">
							<view class="title-text">白嫖专区</view>
						</view>
						<view class="bottom-view">
							<view class="left main-start-flex">
								<!-- <image class="free-icon" :src="freeIcon"></image> -->
								<image class="free-icon" :src="luckyOrderList.pic"></image>
							</view>
							<view class="free-right">
								<view class="free-text-area">
									<view class="text_1">幸运免单盲盒</view>
									<view class="text_1">50%概率免单，支付宝直接返还</view>
								</view>
								<view class="free-btn-area">
									<view class="free-btn" :style="{'background-image': 'url('+freeBtn+')'}">
										<!-- <view class="free-btn-light"></view> -->
										<view class="btn-left">
											<view>￥0</view>
											<view>{{ luckyOrderList.sales + '人已成功免单' }}</view>
										</view>
										<view class="btn-right">抢免单</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<weekly v-if="showWeekly" :weeklyInfo="weeklyInfo" @click.native="goWeeklyDetail"></weekly>
			<goods-list :goods-item="goodsList" :musicSrc="musicSrc"></goods-list>
		</scroll-view>

		<movable-area class="movable-area">
			<movable-view class="movable-view" x="650rpx" y="1000rpx" direction="all">
				<view class="free-play column-center-flex" @click="showFreePlay">
					<image :src="GoodsRightMenu.freePlay" mode="" class="menu-img"></image>
					<view class="menu-text">免费试玩</view>
				</view>
			</movable-view>
		</movable-area>
		<u-toast ref="uToast"></u-toast>
		<daily-popup ref="dailyPopup"></daily-popup>
		<honor-list ref="honorList"></honor-list>
		<free-play ref="freePlay" :firstBlindId="firstBlindId"></free-play>

		<u-popup :show="showAd" mode="center" round="14px" bgColor="transparent"
			:safeAreaInsetBottom="false" :closeOnClickOverlay="false">
			<view class="ad-container">
				<view class="close">
					<image :src="adClose" @click="closeAd"></image>
				</view>
				<image class="ad-img" :src="curAdImg" mode="widthFix" @click="toAdBlindBox"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update.js'
	import { mapGetters, mapState } from 'vuex';
	import { getMusic } from '@/api/goods.js';
	import { get_home_list, getHomeAdvertisement } from '@/api/home.js';
	import GoodsList from '@/components/goods-list/index.vue';
	import DailyPopup from '@/components/coupons/daily-popup.vue';
	import HonorList from '@/components/honor-list/index.vue';
	import FreePlay from '@/components/free-play/index';
	import Weekly from '@/components/weekly/index.vue';
	import BarrageBar from '@/components/winning-barrage/barrage-bar';
	import baseUrl from '../../utils/siteInfo';
	import { dailyTask } from '@/api/daily.js';
	import { GoodsRightMenu } from '../../utils/objectValue';

	export default {
		components: {
			GoodsList,
			DailyPopup,
			HonorList,
			FreePlay,
			Weekly,
			BarrageBar
		},
		data() {
			return {
				GoodsRightMenu,
				swiperList: [],
				refreshPage: false,
				currentSwiper: 0,
				loadingPage: true,
				page: 1,
				limit: 10,
				goodsList: [],
				loadStatus: 'loading',
				hasMore: false,
				musicSrc: null,
				dailyCover: baseUrl.imgroot + '/static/images/home/daily-task.png',
				honorListImg: baseUrl.imgroot + '/static/images/home/honor-list.png',
				must: baseUrl.imgroot + '/static/images/home/new-must-back.png',
				present: baseUrl.imgroot + '/static/images/home/buy-back.png',
				mustIcon: baseUrl.imgroot + '/static/images/home/new-must-icon.png',
				presentIcon: baseUrl.imgroot + '/static/images/home/buy-icon.png',
				dailyStar: baseUrl.imgroot + '/static/images/daily-star.png',
				limitNum: baseUrl.imgroot + '/static/images/home/limit-num.png',
				limitNum2: baseUrl.imgroot + '/static/images/home/limit-num2.png',
				mustBtn: baseUrl.imgroot + '/static/images/home/must-btn.png',
				presentBtn: baseUrl.imgroot + '/static/images/home/present-btn.png',
				bottomBack: baseUrl.imgroot + '/static/images/home/bottom-back.png',
				allBack: baseUrl.imgroot + '/static/images/home/all-back.png',
				freeloader: baseUrl.imgroot + '/static/images/home/freeloader.png',
				freeIcon: baseUrl.imgroot + '/static/images/home/freeloader-img.png',
				freeBtn: baseUrl.imgroot + '/static/images/home/freeloader-btn.png',
				freeloaderLimit: baseUrl.imgroot + '/static/images/home/freeloader-icon.png',
				adClose: baseUrl.imgroot + '/static/images/home/ad-close.png',
				noticeAd: baseUrl.imgroot + '/static/images/home/notice-ad.png',
				percent: 0,
				newerMust: {},
				newerPresent: {},
				luckyOrderList: {},
				adList: [],
				showAd: false,
				curAdImg: '',
				curAdType: '',
				adIndex: 0,
				firstBlindId: '',
				luckyNumType: '',
				weeklyInfo: {},
				bulletList: [],
				showBarrage: false,
				isUserLogin: '',
				showLaunch:true,
			}
		},
		computed: {
			...mapGetters('phone', {
				phoneHieght: 'phoneHieght'
			}),
			showNewer() {
				return (this.newerMust && this.newerMust.new_user_buy_open == '1') ||
				(this.newerPresent && this.newerPresent.new_user_present_open == '1') ||
				(this.luckyOrderList && this.luckyOrderList.lucky_free_open == '1');
			},
			showNewerMust() {
				return this.newerMust.new_user_buy_open == '1';
			},
			showNewerPresent() {
				return this.newerPresent.new_user_present_open == '1';
			},
			showLuckyOrderList() {
				return this.luckyOrderList.lucky_free_open == '1';
			},
			newerBlindboxId() {
				return {
					1: this.newerMust.must_blindbox_id, // 新人必买
					2: this.newerPresent.present_blindbox_id, // 买一送一
					3: this.luckyOrderList.lucky_blindbox_id
				};
			},
			newerPrice() {
				return {
					1: this.newerMust.first_amount,
					2: this.newerPresent.price,
					3: 0
				};
			},
			showWeekly() {
				return this.weeklyInfo && Object.keys(this.weeklyInfo).length;
			}
		},
		onLoad(params) {
			const {scene, agent_user_id = ''} = params;
			// 场景值
			if(scene) {
				const info = decodeURIComponent(scene);
				const arr = info.split('&');
				uni.setStorageSync('agent_user_id', arr[0].substring(5));
			}
			if(agent_user_id){
				uni.setStorageSync('agent_user_id', agent_user_id);
			}
			checkUpdate()
			this.refreshPage = true
			this.goodsList = []
			this.page = 1
			this.getHomeList()
			this.getHomeAd();
			setTimeout(() => {
				this.bulletList = [
					{ avatar: "", job: "国资心理咨询师", desc: "1K+家庭辅导经验" },
					{ avatar: "", job: "家庭教育指导师", desc: "心理健康咨询师" },
					{ avatar: "", job: "幼儿园老师", desc: "15年教育从业经验" },
					{ avatar: "", job: "北师大教授", desc: "北师大教授" }
				];
			}, 600);
			this.$nextTick(() => {
				this.$refs.barrage.initBarrage();
			})
		},
		onShow() {
			this.isUserLogin = this.$user.isLogin()
			this.getPercent()
			if(this.$goods.getIsPlayBack()) {
				this.$goods.setIsPlayBack(false);
			}
		},
		onHide() {
			this.refreshPage = false;
			this.$refs.barrage.close();
		},
		onUnload() {},
		// #ifdef MP
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: "/pages/index/index",
			});
		},
		// #endif
		onPullDownRefresh() {
			checkUpdate()
			this.getHomeList()
		},
		methods: {
			refresherpulling() {
				this.getHomeList()
			},
			getMusicSrc() {
				getMusic().then(res => {
					if (res.code == 0) {
						this.musicSrc = res.data
					}
				})
			},
			goDetail(e) {
				uni.navigateTo({
					url: '/plugins/goods-detail/index?id=' + this.swiperList[e].blindbox_id +
					'&money=' + this.swiperList[e].other
				})
			},
			getMoreData() {
				if (this.hasMore) {
					this.loadStatus = 'loading'
					this.getHomeList()
				}
			},
			//获取首页商品列表数据
			getHomeList() {
				get_home_list({
					page: this.page,
					limit: this.limit
				}).then(res => {
					const {code, data} = res;
					if (code == 0) {
						const {goods = {}, slider = [], newerMust = {}, newerPresent = {}, luckyOrderList = {}, weekActivity = {}} = data;
						this.firstBlindId = goods.data.length ? goods.data[0].id : '';
						this.newerMust = {...newerMust};
						this.newerPresent = {...newerPresent};
						this.luckyOrderList = {...luckyOrderList};
						this.luckyNumType = luckyOrderList.lucky_order_num;
						this.swiperList = slider;
						this.weeklyInfo = weekActivity;
						if (this.page < goods.last_page) {
							this.page++
							this.loadStatus = 'loadmore'
							this.hasMore = true
						} else {
							this.hasMore = false
						}
						if (goods.data.length) {
							this.goodsList = this.goodsList.concat(goods.data)
						}
						this.loadingPage = false
					} else {
						this.loadingPage = false
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: res.msg
						})
					}
				}).catch(err => {
					this.loadingPage = false
					this.$refs.uToast.show({
						type: 'error',
						icon: false,
						message: err.msg
					})
				})
				uni.stopPullDownRefresh()
			},
			getPercent() {
				dailyTask().then(res => {
					const {code, data} = res;
					if(code == 0) {
						this.percent = data.percent >= 1 ? 100 : data.percent * 100;
					}
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.msg
					});
				});
			},
			// 获取广告弹框
			async getHomeAd() {
				const {code, data = []} = await getHomeAdvertisement();
				if(code == 0) {
					this.adList = [...data];
					if(this.adList.length) {
						this.adIndex = 0;
						this.showAd = true;
						this.curAdImg = this.adList[this.adIndex].pic;
						this.curAdType = this.adList[this.adIndex].type;
					}
				}
			},
			showFreePlay() {
				this.$refs.freePlay.open();
			},
			openPopup() {
				if(!this.isUserLogin) {
					this.$login.redirectToLogin();
				} else {
					this.$refs.dailyPopup.open();
				}
			},
			openList() {
				if(!this.isUserLogin) {
					this.$login.redirectToLogin();
				} else {
					this.$refs.honorList.open();
				}
			},
			toBlindDetail(type) {
				const id = this.newerBlindboxId[type];
				const price = this.newerPrice[type];

				uni.navigateTo({
					url: type == 3 ?
					`/plugins/newer-goods-detail/index?id=${id}&type=${type}&numType=${this.luckyNumType}&limit=${this.luckyOrderList.lucky_buy_limit}` :
					`/plugins/newer-goods-detail/index?id=${id}&price=${price}&type=${type}`
				});
			},
			closeAd() {
				this.showAd = false;
				this.adIndex++;
				if(this.adIndex < this.adList.length) {
					setTimeout(() => {
						this.showAd = true;
						this.curAdImg = this.adList[this.adIndex].pic;
						this.curAdType = this.adList[this.adIndex].type;
					}, 500);
				}
			},
			// 广告跳转商品详情 3-买一送一 2-新人必买
			toAdBlindBox() {
				if(this.curAdType === null) {
					return;
				}
				let id = '';
				let price = '';
				let type = 0;
				if(this.curAdType == 2) {
					type = 1;
					id = this.newerBlindboxId[1];
					price = this.newerPrice[1];
				} else {
					type = 2;
					id = this.newerBlindboxId[2];
					price = this.newerPrice[2];
				}
				uni.navigateTo({
					url: `/plugins/newer-goods-detail/index?id=${id}&price=${price}&type=${type}`
				});
			},
			goWeeklyDetail() {
				if(!this.isUserLogin) {
					this.$login.redirectToLogin();
				} else {
					this.$store.commit('goods/setWeeklyInfo', this.weeklyInfo);
					uni.navigateTo({
						url: `/plugins/weekly/index`
					});
				}
			}
		}
	}

</script>

<style lang="scss" scoped>
	.container {
		width: 750rpx;
		/* #ifdef MP-WEIXIN || APP-PLUS */
		height: 100vh;
		/* #endif */
		/* #ifdef H5 */
		height: calc(100vh - 60px);
		/* #endif */
		padding: 0 30rpx;
		background: linear-gradient(90deg, #F2F0FF, #EDEBFF, #F3F8FF);
	}
	.body {
		overflow-y: scroll;
		padding-bottom: 30rpx;
		height: 100%;
	}
	.movable-area{
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 182rpx;
		bottom: env(safe-area-inset-bottom);
		/* #endif */
		/* #ifdef H5 || APP-PLUS */
		top: 20px;
		bottom: 60px;
		/* #endif */
		left: 0;
		width: 100%;
		/* #ifdef MP-WEIXIN */
		height: calc(100vh - 182rpx - env(safe-area-inset-bottom));
		/* #endif */
		/* #ifdef H5 || APP-PLUS */
		height: calc(100vh - 80px);
		/* #endif */
		pointer-events: none;
		z-index: 99;
		.movable-view{
			width: 100rpx;
			height: 142rpx;
			pointer-events: auto;
			position: relative;
		}
		.free-play{
			/* #ifdef MP-WEIXIN */
			// bottom: 50rpx;
			/* #endif */
			/* #ifdef H5 || APP-PLUS */
			// bottom: 66px;
			/* #endif */
			width: 100rpx;
			.menu-img{
				width: 100rpx;
				height: 106rpx;
			}
			.menu-text{
				margin-top: -8px;
				width: 100%;
				height: 44rpx;
				background-color: #8D01E6;
				border-radius: 22px;
				opacity: 0.8;
				font-size: 22rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				color: #FFFFFF;
				font-weight: 400;
				text-align: center;
				line-height: 44rpx;
			}
		}
	}
	.barrage-class{
		width: 100%;
		position: fixed;
		top: 100rpx;
		z-index: 99;
		pointer-events: none;
	}
	.indicator-dot-container {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.indicator-dot {
		width: 8rpx;
		height: 8rpx;
		background: #FFFFFF;
		opacity: 0.5;
		border-radius: 50%;
		transition: width 0.2s ease;
		margin-right: 5rpx;
	}

	.indicator-dot-active {
		width: 24rpx;
		height: 10rpx;
		background: #FFFFFF;
		border-radius: 5rpx;
		opacity: 1;
	}

	::v-deep .u-swiper {
		margin-top: 20rpx;
	}

	.link-image {
		width: 100%;
		height: 140rpx;
		margin-top: 30rpx;
	}

	.link-image_1 {
		clip-path: polygon(0 0, 100% 0, calc(100% - 30rpx) 100%, 0 100%);
	}

	.link-image_2 {
		clip-path: polygon(30rpx 0, 100% 0, 100% 100%, 0 100%);
	}

	.image-logo {
		width: 211rpx;
		height: 46rpx;
	}
	.center-menu{
		width: 100%;
		padding-top: 24rpx;
		.all-back{
			width: 100%;
			height: 168rpx;
			background-size: 100% 100%;
		}
		.all-back > view {
			width: 50%;
			height: 100%;
			background-size: 100% 100%;
		}
		.daily-view {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 10px;

			.daily-title{
				display: flex;
				align-items: flex-end;
				padding-left: 8rpx;
				view{
					text-align: center;
					font-family: BTH;
					color: #FFFFFF;
				}
			}
			.d-view{
				width: 112rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 54rpx;
				background: #5C25C5;
				-webkit-transform: skewX(-22deg);
				transform: skewX(-22deg);
			}
			.t-view{
				width: 100rpx;
				height: 46rpx;
				font-size: 42rpx;
				line-height: 46rpx;
				background: #ED40FA;
				-webkit-transform: skewX(-22deg);
				transform: skewX(-22deg);
			}
			.progress {
				width: 68%;
				// height: 45%;
				display: flex;
				align-items: center;
				padding-top: 10rpx;
			}
			.progress-line{
				position: relative;
				width: 100%;
				height: 16px;
				padding: 3px;
				background-color: #ffffff;
				border-radius: 8px;
				.progress-inner{
					height: 100%;
					background: #693AEE;
					border-radius: 10px;
					opacity: 1;
				}
				.progress-text {
					position: absolute;
					right: 7px;
					top: 0;
					font-size: 12px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #b7a5e8;
					line-height: 16px;
				}
			}
			.number-percent {
				margin-left: 10rpx;
			}
		}
		.list-view {
		}
		.list-text{
			margin-left: 40%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		.hl-view{
			display: flex;
			align-items: flex-end;
			view{
				text-align: center;
				font-family: BTH;
				color: #FFFFFF;
			}
		}
		.ls-view{
			display: flex;
			align-items: center;
			margin-bottom: 19rpx;
			view{
				text-align: center;
				font-family: BTH;
			}
		}
		.h-view{
			width: 112rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 54rpx;
			background: #2340C7;
			-webkit-transform: skewX(-22deg);
			transform: skewX(-22deg);
		}
		.l-view{
			width: 78rpx;
			height: 46rpx;
			font-size: 40rpx;
			line-height: 46rpx;
			background: #1771DB;
			-webkit-transform: skewX(-22deg);
			transform: skewX(-22deg);
		}
		.limit-view{
			font-size: 26rpx;
			color: #381878;
			background: #ffffff;
			transform: skewX(-8deg);
		}
		.sprint-view{
			font-size: 24rpx;
			color: #ffffff;
			border-bottom: 1px solid #ffffff;
		}
	}

	.newer{
		padding-top: 25rpx;
		.new-title{
			width: 100%;
		}
		.head_decorate_1 {
			width: 9rpx;
			height: 48rpx;
			background: #8D01E6;
		}

		.head_decorate_2 {
			width: 4rpx;
			height: 48rpx;
			background: #8D01E6;
			margin-left: 3rpx;
		}

		.head_title {
			display: flex;
			align-items: flex-end;
			justify-content: flex-start;
		}

		.head_title_1 {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			margin-left: 8rpx;
		}

		.head_title_2 {
			font-size: 15rpx;
			font-family: Roboto;
			font-weight: 400;
			color: #B0B0B0;
			margin-left: 8rpx;
			margin-bottom: 4rpx;
		}
		.new-content{
			width: 100%;
		}
		.new-item{
			width: 100%;
			height: 312rpx;
			margin: 30rpx 2rpx;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
		}
		.free-item-free{
			width: 100%;
			height: 332rpx;
			margin: 30rpx 2rpx;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			position: relative;
			.free-limit-view{
				position: absolute;
				top: 6rpx;
				right: 12rpx;
				width: 130rpx;
				height: 127rpx;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				transform: rotate(-25deg);
				view{
					color: #7A3C3C;
				}
				.quota{
					font-size: 36rpx;
					font-family: BTH;
					font-weight: 400;
					height: 34rpx;
				}
				.has-buy{
					font-size: 22rpx;
					font-family: PingFang SC-Regular, PingFang SC;
				}
			}
			.top-view{
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
			}
			.title-text{
				font-family: BTH;
				font-size: 54rpx;
				color: #ffffff;
				padding-left: 42rpx;
			}
			.bottom-view{
				width: 100%;
				height: calc(100% - 80rpx);
				display: flex;
			}
			.free-right{
				width: 57%;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
			}
			.free-icon{
				width: 288rpx;
				height: 230rpx;
			}
			.free-text-area{
				display: flex;
				flex-direction: column;
				padding-top: 10rpx;
				view{
					font-family: PingFang SC-Semibold, PingFang SC;
					color: #4F0F16;
				}
				view:first-child{
					font-size: 36rpx;
    				font-weight: 800;
				}
				view:last-child{
					font-size: 24rpx;
					padding-top: 10rpx;
				}
			}
			.free-btn-area{
				padding-top: 10rpx;
			}
			.free-btn{
				position: relative;
				width: 345rpx;
				height: 100rpx;
				background-size: 100% 100%;
				display: flex;
				position: relative;
				overflow: hidden;
				.btn-left{
					width: 60%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding-left: 24rpx;
					view:first-child{
						font-size: 40rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: 600;
						color: #583131;
					}
					view:last-child{
						padding-left: 10rpx;
						font-size: 22rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #805252;
					}
				}
				.btn-right{
					width: 40%;
					font-family: BTH;
					font-size: 44rpx;
					color: #ffffff;
					line-height: 100rpx;
				}
			}

			// .button {
			// 	display: inline-block;
			// 	padding: 10px 20px;
			// 	background-color: #3498db;
			// 	color: #fff;
			// 	border: none;
			// 	cursor: pointer;
			// 	position: relative;
			// 	overflow: hidden;
			// }

			// .button::before {
			// 	content: "";
			// 	position: absolute;
			// 	top: -50%;
			// 	left: -50%;
			// 	width: 200%;
			// 	height: 200%;
			// 	background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 60%);
			// 	transform: scale(0);
			// 	opacity: 0;
			// 	transition: transform 0.3s, opacity 0.3s;
			// }

			// .button:hover::before {
			// 	transform: scale(1);
			// 	opacity: 1;
			// }

			.free-btn{
				// infinite-执行无限次
				animation: myAnimation 5s infinite;
			}
			@keyframes myAnimation{
				// 0%和100%代表首尾帧,也可分别使用from、to替
				0%{
					// 定义 2D 缩放转换
					transform: scale(1)
				}
				25%{
					transform: scale(1.1)
				}
				50%{
					transform: scale(1)
				}
				75%{
					transform: scale(1.1)
				}
			}

			// .free-btn:after {
			// 	content: '';
			// 	position: absolute;
			// 	width: 40rpx;
			// 	height: 80%;
			// 	z-index: 1;
			// 	// background-color: rgba(112, 203, 254, 0.5);
			// 	background-color: #FFFFFF;
			// 	opacity: 0.3;
			// 	transform: translateX(-100rpx) skewX(30deg);
			// 	transition: 0.75s ease-in-out;
			// 	overflow: hidden;
			// 	animation: guang 2.5s 1s linear infinite;
			// 	// box-shadow: 0 0 10rpx #24b4f3;
			// }
			// @keyframes guang {
			// 	50%,
			// 	100% {
			// 		transform: translateX(100rpx) skewX(30deg);
			// 	}
			// }
		}
		.left{
			width: 43%;
		}
		.right{
			width: 57%;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.right > view{
			height: calc(100% / 3);
			padding-top: 16rpx;
		}
		.top-area{
			display: flex;
			position: relative;
		}
		.middle-area{
			padding-top: 12rpx;
		}
		.top-text{
			width: calc(100% - 124rpx);
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.top-text > view{
			font-family: PingFang SC-Semibold, PingFang SC;
			color: #4F0F16;
		}
		.title_1{
			font-size: 36rpx;
			font-weight: 800;
		}
		.title_1_newer{
			font-size: 32rpx;
			font-weight: 600;
		}
		.new-tag{
			width: 61rpx;
			height: 36rpx;
			background: linear-gradient(82deg, #FC559D 0%, #F74535 54%, #F68E41 96%);
			border-radius: 7px;
			opacity: 1;
			font-size: 24rpx;
			text-align: center;
			color: #ffffff;
		}
		.title_2{
			font-size: 24rpx;
			padding-top: 10rpx;
		}
		.top-text:last-child{
			font-size: 24rpx;
			font-weight: 400;
		}
		.limit-class{
			position: absolute;
			bottom: 0px;
    		right: 2px;
			width: 118rpx;
			height: 116rpx;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			font-family: BTH;
			font-weight: 500;
			color: #7A3C3C;
			transform: rotate(-25deg);
			view{
				height: 17px;
			}
		}
		.middle-view{
			position: relative;
			width: 341rpx;
			height: 83rpx;
			background-size: 100% 100%;

			// transition: all 0.5s ease-in-out;
			// background: -webkit-linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.5)50%,rgba(255,255,255,0)100%);
			// transform: skewX(-30deg);

			// &::before {
			// 	content: "";
			// 	position: absolute;
			// 	top: 0;
			// 	width: 16rpx;
			// 	height: 40rpx;
			// 	background-color: rgba(255, 255, 255, 0.4);
			// 	transform: rotate(-45deg);
			// 	animation: scan-light 2s ease-in infinite;
			// }
			// @keyframes scan-light {
			// 	from {
			// 		right: -100%;
			// 	}
			// 	to {
			// 		right: 0;
			// 	}
			// }

			// background: linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.5)50%,rgba(255,255,255,0)100%);
			// transform: skewX(-30deg);
			// transition: all 0.5s ease-in-out;
			view:first-child{
				width: 56%;
				font-size: 48rpx;
				text-align: center;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #F9606F;
				line-height: 82rpx;
			}
			view:last-child{
				width: 44%;
			}
			.title_3{
				font-size: 36rpx;
				font-family: BTH;
				font-weight: 400;
				color: #FFFFFF;
			}
			.title_4{
				font-size: 20rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: rgba(255,255,255,0.4);
			}
		}
		// .middle-view::before{
		// 	content:'';
		// 	position: absolute;
		// 	left: 0;
		// 	top: 0;
		// 	right: 0;
		// 	bottom: 0;
		// 	background: linear-gradient(-45deg,transparent 30%,transparent,rgba(255,255,255,.5),transparent 70%) no-repeat;
		// 	background-size: 100% 100%;
		// 	background-position: 100% 100%;
		// }
		// .middle-view:hover::before{
		// 	transition: background-position 3s;
		// 	background-position: -100% -100%;
		// }
		.bottom-area{
			padding-top: 10rpx;
			display: flex;
			justify-content: flex-start;
			image{
				width: 354rpx;
				height: 64rpx;
			}
		}
		.new-icon{
			width: 288rpx;
			height: 264rpx;
		}
	}
	/deep/.u-popup__content{
		background-color: transparent !important;
	}
	.ad-container{
		width: 90vw;
		height: 84vh;
		padding-top: 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.close{
			width: 100%;
			display: flex;
			justify-content: flex-end;
			image {
				width: 64rpx;
				height: 64rpx;
			}
			// #ifdef APP-PLUS || H5
			img{
				width: 64rpx;
				height: 64rpx;
			}
			// #endif
		}
		.ad-img{
			margin-top: 20rpx;
			width: 92%;
		}
	}
</style>